<template>
    <div class="ma-content-block lg:flex justify-between">
      <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm"  @resetSearch="resetSearch">
        <template #tableSearch>
          <a-col :span="6">
            <a-form-item field="code" label="溯源码">
              <a-input v-model="searchForm.code" placeholder="请输入" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="order" label="订单信息">
              <a-input v-model="searchForm.order" placeholder="订单ID|订单号" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="user" label="会员账号">
              <a-input v-model="searchForm.user" placeholder="会员账号" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="uid" label="会员UID">
              <a-input v-model="searchForm.uid" placeholder="会员UID" :allow-clear="true" @keydown.enter="refresh"></a-input>
            </a-form-item>
          </a-col>
        </template>
        <template #user="{record}">
         <div>UID:{{record.user_id}}</div>
         <div>会员名:{{record.user_name}}</div>
        </template>
       
        <template #operationAfterExtend="{record}">
          <a-button type="primary" size="mini" shape="round" @click="detail(record)">详情</a-button>
          <a-button type="primary" size="mini" shape="round" class="green_color" @click="bind('release',record)">解绑</a-button>
          <a-button type="primary" size="mini" shape="round" class="yellow_color"  @click="bind('change',record)">换绑</a-button>
        </template>
      </sa-table>
      <!-- 编辑表单 -->
      <detail-form ref="detailRef" @success="refresh" />
      <bind-form ref="bindRef" @success="refresh" />
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, reactive, computed,watch } from 'vue'
  import AsApi from '@/api/system/afterSale'
  import { Message } from '@arco-design/web-vue'
  import SaTable from '@cps/sa-table/index.vue'
  import { throttle } from 'lodash';
  import tool from '@/utils/tool'
  import detailForm from './detail.vue'
  import bindForm from './bind.vue'
  const crudRef = ref()
  const bindRef = ref()
  const detailRef=ref()
  const searchForm = ref({
    order:'',
    user:'',
    code:'',
    uid:'',
  })  
  const options = reactive({
    api: AsApi.source_code_list_1,//表格数据接口
    operationColumnWidth: 150,//操作欄
    showSearch:true,
    columnAlign: 'center',
    pageSimple: false,//是否展示操作欄有 以及工具欄
    isTreeTable:false,
    showLine:false,
    add: {//頂部新增按鈕
      show: false,
      auth: ['/core/menu/save'],
      func: async () => {
        editRef.value?.open()
      },
    },
    edit: {//操作欄编辑按鈕
      show: false,
      auth: ['/core/menu/update'],
      func: async (record) => {
        editRef.value?.open('edit',record)
        editRef.value?.setFormData(record)
      },
    },
    isExpand: false,//展開所有子樹
  })
  
  const columns = reactive([
    { title: 'ID', dataIndex: 'id', width: 100 },
    { title: 'SKU', dataIndex: 'sku', width: 100 },
    { title: 'Sku名称', dataIndex: 'sku_name', width: 100 },
    { title: '溯源码', dataIndex: 'code', width: 150 },
    { title: '订单ID', dataIndex: 'order_id', width: 150 },
    { title: '订单会员', dataIndex: 'user', width: 150 },
    { title: '创建时间', dataIndex: 'create_time', width: 150 },
  ])
  
  const detail=async(record)=>{
    detailRef.value?.open(record)
  }
  const bind=(type,datas)=>{
    bindRef.value?.open(type,datas)
  }
  const paramsData=ref({})
  const getParams=async()=>{
   
  }
  const refresh = async () => {
    crudRef.value?.refresh()
  }
  const resetSearch=()=>{
    
  }
  onMounted(async () => {
    refresh()
    getParams()
  })
  </script>
  
  <style scoped>
  .icon {
    width: 1em;
  }
  </style>
  